import React from 'react'
import { Button, Input, Form, Toast, Modal } from 'antd-mobile'
import { doSendMsgApi, doCheckCodeApi } from '@/api/regist'
import { useLocation,useHistory } from 'react-router-dom/cjs/react-router-dom.min'

// 注册页第一步组件
export default function Step1() {
  const [form] = Form.useForm()
  const loc = useLocation()
  const his = useHistory()
  
  // 点击下一步执行的方法
  const onSubmitFn = () => {
    const values = form.getFieldValue()
    // 首先需要验证短信验证码是否正确 调用接口验证
    doCheckCodeApi({
      tel:loc.state.tel,
      telcode:values.telcode
    }).then(res=>{
      if(res.data.code == 200){
        // 直接跳到下一步
        his.push({
          pathname:'/regist/step3',
          state:{
            tel:loc.state.tel
          }
        })
      }else{
      //  提示验证码错误信息
      Toast.show({
        icon:'fail',
        content:res.data.message
      })
      }
    })
  }
  // 点击发送验证码
  const sendMsgFn = () => {
    const values = form.getFieldValue()
    // 正则校验手机号
    // if(/^1[3-9]\d{9}$/.test(values.telcode)){
      // 验证通过
      doSendMsgApi({
        tel:loc.state.tel
      }).then(res=>{
        console.log(res);
        
      })
    // };
  }

  return (

    <div style={{
      marginTop: '10px'
    }}>
      <Form layout='horizontal'
        form={form}
        mode='card'>
        <Form.Item label='短信验证码' name="telcode" extra={<a onClick={sendMsgFn}>发送验证码</a>} >
          <Input placeholder='请输入' />
        </Form.Item>

        <Button block type='submit' color='danger' size='large' style={{
          borderRadius: '30px',
          boxSizing: 'border-box'
        }}
          onClick={onSubmitFn}>下一步</Button>
      </Form>
    </div>
  )
}
